<template>
  <el-card shadow="never">
    <div slot="header" ref="topHeader">
      <el-form :inline="true" :model="listQuery">
        <el-form-item label="角色名:">
          <el-input style="width: 160px" v-model="listQuery.name" placeholder="角色名" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="search">查询</el-button>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addEdit(null)">增加</el-button>
        </el-form-item>
      </el-form>
    </div>
    <div>
      <el-table ref="tableCot" v-loading="loading" element-loading-text="请稍后..." :data="roleData" border
                style="width: 100%" :max-height="customTableHeight">
        <el-table-column type="index" width="40"/>
        <el-table-column prop="name" label="角色名" min-width="120" show-overflow-tooltip/>
        <el-table-column prop="description" label="角色描述" min-width="120" show-overflow-tooltip/>
        <el-table-column prop="updateUserName" label="创建人" min-width="120" show-overflow-tooltip/>
        <el-table-column prop="updateTime" label="最近更新时间" min-width="120" show-overflow-tooltip/>
        <el-table-column label="状态" min-width="100">
          <template slot-scope="scope">
            <el-tooltip :content="scope.row.isEnable?'已启用':'已禁用'" placement="top">
              <el-switch
                v-model="scope.row.isEnable"
                :active-value="true"
                :inactive-value="false"
                @change="switchChange(scope.row)"
              />
            </el-tooltip>
          </template>
        </el-table-column>
        <el-table-column fixed="right" label="操作" width="130">
          <template slot-scope="scope">
            <el-tag style="cursor:pointer;margin-right: 4px;" size="mini" @click="addEdit(scope.row)"><i
              class="el-icon-edit"/>编辑
            </el-tag>
            <el-tag v-if="!scope.row.isSystem" style="cursor:pointer;" size="mini" type="danger"
                    @click="remove(scope.row)"><i
              class="el-icon-delete"/>删除
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
      <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList"/>
      <add-edit :dialog-visible="dialogVisible" :data="oneData" @close="closeDialog"/>
    </div>
  </el-card>
</template>
<script>
  import Pagination from '@/components/Pagination'
  import addEdit from '@/views/system/role/addEdit'
  import roleApi from '@/api/system/role'

  export default {
    name: 'systemRole',
    components: { Pagination, addEdit },
    data() {
      return {
        ztreeObj: null,
        setting: {
          check: {
            enable: true
          },
          data: {
            simpleData: {
              enable: true,
              idKey: 'id',
              pIdKey: 'pId',
              rootPId: 0
            }
          }
        },
        loading: false,
        listQuery: {
          name: '',
          page: 1,
          pageSize: 10
        },
        dialogVisible: false,
        total: 0,
        roleData: [],
        oneData: {
          id: null,
          name: null,
          description: null,
          permission: []
        },
        customTableHeight: 200
      }
    },
    mounted() {
      this.getList()
      let that = this
      window.onresize = () => {
        //37是box的header的padding，70=(60+10)是顶部的高度
        let tempHeaderHeight = this.$refs.topHeader.offsetHeight + 37 + 70
        let tempHeight = document.body.clientHeight - (106 + tempHeaderHeight)
        if (tempHeight < 300) {
          tempHeight = 300
        }
        that.customTableHeight = tempHeight
      }
      setTimeout(function() {
        const resizeEvent = new Event('resize')
        window.dispatchEvent(resizeEvent)
      }, 100)
    },
    destroyed() {
      window.onresize = null
    },
    methods: {
      switchChange(row) {
        const enable = row.isEnable
        let text = '是否禁用角色？'
        if (enable) {
          text = '确认启用该角色？'
        }
        this.$confirm(text, '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          closeOnPressEscape: false,
          closeOnClickModal: false,
          type: 'warning'
        }).then(() => {
          roleApi.status(row.id, enable).then(res => {

          }).catch(() => {
            row.isEnable = !enable
          })
        }).catch(() => {
          row.isEnable = !enable
        })
      },
      search() {
        this.listQuery.page = 1
        this.listQuery.pageSize = 10
        this.getList()
      },
      getList() {
        this.loading = true
        roleApi.list(this.listQuery).then(res => {
          this.roleData = res.data || []
          this.loading = false
        }).catch(() => this.loading = false)
      },
      addEdit(row) {
        if (row) {
          this.dialogVisible = true
          this.oneData = JSON.parse(JSON.stringify(row))
        } else {
          this.dialogVisible = true
        }
      },
      remove(row) {
        this.$confirm('此操作将永久删除该角色, 是否继续?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          roleApi.remove(row.id).then(res => {
            this.$message({
              type: 'success',
              message: '删除成功'
            })
            this.getList()
          })
        })
      },
      closeDialog() {
        if (this.dialogVisible) {
          this.getList()
        }
        this.dialogVisible = false
        this.oneData = {
          id: null,
          name: null,
          description: null,
          permission: []
        }
      }
    }
  }
</script>
